<template lang="html">
  <div id="pageBox">
    <audio ref="audio" id="audio" loop="loop"></audio>
    <div class="clockIn" v-if="nowChap==0">
      打卡得学分
    </div>
    <div class="chap-container">{{ form.page }}/{{ total }}</div>
    <BgStyle>
      <div class="bgImg" slot="img">
        <div class="headerContent pd20">
          <div class="iconBox" @click="playStatus = !playStatus">
            <i v-show="!playStatus" class="iconfont icon-bofang"></i>
            <i v-show="playStatus" class="iconfont icon-zanting"></i>
          </div>
          <div class="text">
            收听本章节
          </div>
          <div class="time">
            15分钟
          </div>
        </div>
      </div>
      <div class="content" slot="content">
        <div class="readContent">
          <div class="readTitle">
            {{form.chap}}.{{ detail.title }}
            <div class="tag">
              正在阅读
            </div>
          </div>
          <div class="readMain" v-html="detail.content"></div>
        </div>
      </div>
    </BgStyle>
    <div class="footer">
      <ul class="footerList">
        <li class="footerItem" :class="{disabled:form.page <= 1}" @click="onChangeChap('after')"><span class="iconfont icon-arrow-left"></span>上一章</li>
        <li class="footerItem" @click="goBack">返回列表</li>
        <li class="footerItem" :class="{disabled:form.page >= total}" @click="onChangeChap('next')">下一章 <span class="iconfont icon-arrow-right"></span></li>
      </ul>
    </div>
  </div>
</template>

<script>
import BgStyle from '@/components/bgStyle';
import { getChapDetail, getChapResource } from '@/api/pay'
export default {
  components:{
    BgStyle
  },
  data(){
    return {
      nowChap:0,
      dayNumId: this.$route.query.dayNumId,
      bookId: this.$route.query.bookId,
      bookName: this.$route.query.bookName,
      form: {
        page: this.$route.query.chap,
        limit: 1
      },
      total: 0,
      detail: {},
      playStatus: false
    }
  },
  watch: {
    playStatus(flag) {
      if (flag) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods:{
    getDetail() {
      const { dayNumId, bookId, form } = this
      getChapDetail({dayNumId, bookId}, form).then(res => {
        this.detail = res.page.list[0]
        this.total = res.page.totalPage
        this.playStatus = false
        this.getResource()
      })
    },
    onChangeChap(type){
      if (type == "next" && this.form.page < this.total) {
        this.form.page++
        this.getDetail()
      }
      if (type == "after" && this.form.page > 1) {
        this.form.page--
        this.getDetail()
      }
    },
    goBack() {
      this.$router.back()
    },
    getResource() {
      const { id } = this.detail
      getChapResource(id).then(res => {
        if (!res.resourceUrl) {
          alert(res.msg || '资源不存在')
          return
        }
        this.$refs.audio.src = res.resourceUrl
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .clockIn{
      position: fixed;
      font-size:0.14rem;
      background:#6B6BFA;
      color:#fff;
      width:1rem;
      height:0.24rem;
      line-height: 0.25rem;
      border-radius: 0.12rem 0 0 0.12rem;
      padding-left:0.1rem;
      right:0;
      top:0.82rem;
      z-index: 98;
      box-shadow: 0.04rem 0.02rem 0.1rem 0.02rem #dedede;
    }
    .bgImg{
      .headerContent{
        display: flex;
        height:0.8rem;
        padding:0.2rem;
        .iconBox{
          width:0.4rem;
          height:0.4rem;
          background:#fff;
          border-radius: 50%;
          line-height: 0.4rem;
          text-align: center;
          color:#999;
          span{
            font-size:0.18rem;
          }
        }
        .text{
          flex:1;
          color:#fff;
          line-height: 0.4rem;
          padding:0 0.1rem 0 0.2rem;
          font-size:0.14rem;
        }
        .time{
          width:0.6rem;
          line-height: 0.4rem;
          font-size:0.12rem;
          color:#fff;
          text-align: right;
        }
      }
    }
    .content{
        height:100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
        padding-bottom:0.1rem;
        .chapter{
          .chapTitle{
            position:relative;
            padding:0.3rem 0.2rem 0.2rem;
            .tag{
              position:absolute;
              right:0.2rem;
              top:0.31rem;
              font-size:0.12rem;
              color:red;
              border:1px solid red;
              padding:0.01rem 0.04rem;
            }
          }
          .chapList{
            .list{
              .item{
                width:100%;
                display: flex;
                padding:0.14rem 0;
                border-bottom:1px solid #dedede;
                .index{
                  min-width:0.6rem;
                  color:#999;
                  font-size:0.14rem;
                }
                .name{
                  flex:1;
                  font-size:0.14rem;
                }
                .read{
                  border:1px solid #999;
                  color:#999;
                  font-size:0.12rem;
                  height:0.22rem;
                  line-height: 0.22rem;
                  padding:0 0.1rem;
                  border-radius: 0.11rem;
                  &.y{
                    color:#999;
                    border-color:#999;
                  }
                  &.n{
                    color:blue;
                    border-color:blue;
                  }
                }
              }

            }
          }
        }
        .readContent{
          .readTitle{
            position:relative;
            padding:0.3rem 0.2rem 0.2rem;
            .tag{
              position:absolute;
              right:0.2rem;
              top:0.31rem;
              font-size:0.12rem;
              color:blue;
              border:1px solid blue;
              padding:0.01rem 0.04rem;
            }
          }
        }
        .readMain{
          padding: 0 0.2rem 0.2rem;
        }
    }
    .chap-container{
      height: .16rem;
      font-size: .12rem;
      line-height: .16rem;
      text-align: center;
      background: #000;
      color: #fff;
    }
    .footer{
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      height:0.48rem;
      background:#fff;
      box-shadow: 0 0 20px 2px #dedede;
      z-index: 99;
      .footerList{
        width:100%;
        height:100%;
        display: flex;
        .footerItem{
          flex:1;
          text-align: center;
          line-height: 0.48rem;
          color: #333;
          a{
            color: #333;
          }
          &.disabled{
            color:#999;
          }
        }
      }
    }
  }
</style>
